<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
				xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <meta charset="utf-8"/>
  <title>图书列表</title>
  <link rel="stylesheet" href="/css/layui.css" media="all"/>
  <link rel="stylesheet" href="/css/user.css" media="all" />
  
</head>
<body>

<div class="bookDiv">
<br/>
  书名：
  <div class="layui-inline">
    <input class="layui-input" name="bookname" id="bookname" autocomplete="off"/>
  </div>
  编号：
  <div class="layui-inline">
    <input class="layui-input" name="booknumber" id="booknumber" autocomplete="off"/>
  </div>
  作者：
  <div class="layui-inline">
    <input class="layui-input" name="bookauthor" id="bookauthor" autocomplete="off"/>
  </div>
 出版社：
  <div class="layui-inline">
    <input class="layui-input" name="bookpress" id="bookpress" autocomplete="off"/>
  </div>
 类别：
  <div class="layui-inline">
   	<form class="layui-form" action="">
    <select name="booktype" id="booktype" autocomplete="off">
    		  <option value="">--请选择类别--</option>
              <option value="1">文学</option>
              <option value="2">外语</option>
              <option value="3">经济</option>
              <option value="4">管理</option>
              <option value="5">计算机</option>
              <option value="6">科学</option>
    </select>
    </form>
  </div>
  状态：
  <div class="layui-inline">
   	<form class="layui-form" action="">
    <select name="isshow" id="isshow" autocomplete="off">
    		  <option value="">--请选择类别--</option>
    		  <option value="1">正常状态</option>
              <option value="0">下架状态</option>
    </select>
    </form>
  </div>  
  <button class="layui-btn" data-type="reload">搜索</button>
</div>

<br/>
<div class="layui-btn-group otherOperation">
  <button class="layui-btn" data-type="addBook">添加图书</button>
</div>

<table class="layui-hide" id="bookTable" lay-filter="tableFilter"></table>



<div class="form-group" id="addBook" hidden="hidden">
<form class="layui-form" action="">
	<div class="user_left">
	  <div class="layui-form-item">
	    <label class="layui-form-label">图书名称</label>
	    <div class="layui-input-inline">
	      <input type="hidden"  id="a-form-bookid" name="bookid" required="required"  lay-verify="required"  autocomplete="off" class="layui-input" />
	      <input type="text"  id="a-form-bookname" name="bookname" placeholder="请输入书名" required="required"  lay-verify="required"  autocomplete="off" class="layui-input" />
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">编号</label>
	    <div class="layui-input-inline">
	      <input type="text"  id="a-form-booknumber" name="booknumber" placeholder="请输入编号" required="required"  lay-verify="required"  autocomplete="off" class="layui-input" />
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">作者</label>
	    <div class="layui-input-inline">
	      <input type="text"  id="a-form-bookauthor" name="bookauthor" placeholder="请输入作者" required="required"  lay-verify="required"  autocomplete="off" class="layui-input" />
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">出版社</label>
	    <div class="layui-input-inline">
	      <input type="text"  id="a-form-bookpress" name="bookpress" placeholder="请输入出版社" required="required"  lay-verify="required"  autocomplete="off" class="layui-input" />
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">类别</label>
	    <div class="layui-input-inline">
	      <select  id="a-form-typeid" name="typeid" lay-verify="required">
	        <option value=""></option>
	        <option value="1">文学</option>
            <option value="2">外语</option>
            <option value="3">经济</option>
            <option value="4">管理</option>
            <option value="5">计算机</option>
            <option value="6">科学</option>
	      </select>
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">库存</label>
	    <div class="layui-input-inline">
	      <input type="text"  id="a-form-bookamount" name="bookamount" placeholder="请输入库存" required="required"  lay-verify="required|number"  autocomplete="off" class="layui-input" />
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">共享者</label>
	    <div class="layui-input-inline">
	      <input type="text"  id="a-form-bookowner" name="bookowner" placeholder="请输入共享者名称"   autocomplete="off" class="layui-input" value="sys"/>
	    </div>
	  </div>
	  <div class="layui-form-item layui-form-text">
		    <label class="layui-form-label">图书简介</label>
		    <div class="layui-input-block">
		      <textarea id="a-form-bookremark" name="bookremark" placeholder="请输入简介内容" class="layui-textarea"></textarea>
		    </div>
	  </div>
  </div>
  <div class="user_right">
		<div class="layui-upload">
			  <button type="button" class="layui-btn" id="addImg">上传图片</button>
			  <input type="hidden"  id="a-form-bookpicture" name="bookpicture"  required="required"  lay-verify="required"  autocomplete="off" class="layui-input" />
			  <div class="layui-upload-list">
			    <img class="layui-upload-img" id="a-form-bookimg" src="" width="200px" height="250px"/>
			  	<p id="addImgText"></p>
			  </div>
		</div>
  </div>
  <button class="layui-btn layui-hide" lay-submit="" lay-filter="subAddBook">确认添加</button>
</form>  
</div>


<div class="form-group" id="editBook" hidden="hidden">
<form class="layui-form" action="">
	<div class="user_left">
	  <div class="layui-form-item">
	  	<input type="hidden" id="form-bookid" name="bookid"/>
	    <label class="layui-form-label">图书名称</label>
	    <div class="layui-input-inline">
	      <input type="text"  id="form-bookname" name="bookname" placeholder="请输入书名" required="required"  lay-verify="required"  autocomplete="off" class="layui-input" />
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">编号</label>
	    <div class="layui-input-inline">
	      <input type="text"  id="form-booknumber" name="booknumber" placeholder="请输入编号" required="required"  lay-verify="required"  autocomplete="off" class="layui-input" />
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">作者</label>
	    <div class="layui-input-inline">
	      <input type="text"  id="form-bookauthor" name="bookauthor" placeholder="请输入作者" required="required"  lay-verify="required"  autocomplete="off" class="layui-input" />
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">出版社</label>
	    <div class="layui-input-inline">
	      <input type="text"  id="form-bookpress" name="bookpress" placeholder="请输入出版社" required="required"  lay-verify="required"  autocomplete="off" class="layui-input" />
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">类别</label>
	    <div class="layui-input-inline">
	      <select  id="form-typeid" name="typeid" lay-verify="required">
	        <option value=""></option>
	        <option value="1">文学</option>
            <option value="2">外语</option>
            <option value="3">经济</option>
            <option value="4">管理</option>
            <option value="5">计算机</option>
            <option value="6">科学</option>
	      </select>
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">库存</label>
	    <div class="layui-input-inline">
	      <input type="text"  id="form-bookamount" name="bookamount" placeholder="请输入库存" required="required"  lay-verify="required"  autocomplete="off" class="layui-input" />
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">共享者</label>
	    <div class="layui-input-inline">
	      <input type="text"  id="form-bookowner" name="bookowner" placeholder="请输入共享者名称"   autocomplete="off" class="layui-input" />
	    </div>
	  </div>
	  <div class="layui-form-item layui-form-text">
		    <label class="layui-form-label">图书简介</label>
		    <div class="layui-input-block">
		      <textarea id="form-bookremark" name="bookremark" placeholder="请输入简介内容" class="layui-textarea"></textarea>
		    </div>
	  </div>
  </div>
  <div class="user_right">
		<div class="layui-upload">
			  <button type="button" class="layui-btn" id="uploadImg">更换图片</button>
			  <input type="hidden" id="form-bookpicture"/>
			  <div class="layui-upload-list">
			    <img class="layui-upload-img" id="form-bookimg" src="" width="200px" height="250px"/>
			    <p id="imgText"></p>
			  </div>
		</div>
  </div>
  <button class="layui-btn layui-hide" lay-submit="" lay-filter="updateBook">立即提交</button>
</form>  
</div>









<script type="text/javascript"></script> 
<script src="/layui.js"></script>
<script>
layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#bookTable'
    ,height: 'full'                   
    ,url: '/admin/getBook' //数据接口
    ,request: {
    		  pageName: 'begin' //页码的参数名称，默认：page
    		  ,limitName: 'length' //每页数据量的参数名，默认：limit
    		  }
    ,page: true //开启分页
    ,even: true
    ,cols: [[ //表头
      {checkbox: true, fixed: true}
      ,{field: 'bookid', title: 'id', align:'center',width:90, fixed: 'left'}
      ,{field: 'booknumber', title: '编号', align:'center',width:200, sort: true, fixed: 'left'}
      ,{field: 'bookname', title: '书名', align:'center',width:250}
      ,{field: 'bookauthor', title: '作者', align:'center',width:150}
      ,{field: 'bookpress', title: '出版社', align:'center',width:150}
      ,{field: 'typeName', title: '类型', align:'center',width:80}
      ,{field: 'bookamount', title: '库存', align:'center',width:80, sort: true}
      ,{field: 'bookborrow', title: '借阅数量', align:'center',width:120, sort: true}
      ,{field: 'bookshelvetime', title: '上架时间', align:'center',width:150, sort: true}
      ,{field: 'bookowner', title: '共享者', align:'center',width:118}
      ,{fixed: 'right', title: '操作',width:150, align:'center', toolbar: '#handler'} //这里的toolbar值是模板元素的选择器
    ]]
    ,id: 'bookReload'
  });
    
  	  
    //条件查询
	var $ = layui.$, active = {
		reload : function() {
			var bookname = $('#bookname').val().trim();
			var booknumber = $('#booknumber').val().trim();
			var bookauthor = $('#bookauthor').val().trim();
			var bookpress = $('#bookpress').val().trim();
			var booktype = $('#booktype').val().trim();
			var isshow = $('#isshow').val().trim();
			var jsonString = "";
			/*<![CDATA[*/
			var i = 0;
			jsonString = "{";
			if(bookname!=null&&bookname!=""){
				i++;
				jsonString = jsonString + "name:'" + bookname + "'";
			}
			if(booknumber!=null&&booknumber!=""){
				if(i!=0){
					jsonString = jsonString + ","
				}
				i++;
				jsonString = jsonString + "number:'" + booknumber  + "'";
			}
			if(bookauthor!=null&&bookauthor!=""){
				if(i!=0){
					jsonString = jsonString + ","
				}
				i++;
				jsonString = jsonString + "author:'" + bookauthor  + "'";
			}
			if(bookpress!=null&&bookpress!=""){
				if(i!=0){
					jsonString = jsonString + ","
				}
				i++;
				jsonString = jsonString + "press:'" + bookpress  + "'";
			}
			if(booktype!=null&&booktype!=""){
				if(i!=0){
					jsonString = jsonString + ","
				}
				i++;
				jsonString = jsonString + "type:" + booktype;
			}
			if(isshow!=null&&isshow!=""){
				if(i!=0){
					jsonString = jsonString + ","
				}
				i++;
				jsonString = jsonString + "isShow:" + isshow;
			}
			jsonString = jsonString + "}"
			/*]]>*/
			
			//执行重载
			table.reload('bookReload', {
				page : {
					curr : 1
				//重新从第 1 页开始
				},
				where : {
						jsonString : jsonString
				}
			});
		},addBook: function(){ //添加图书
			var openIndex = layer.open({
		        type: 1,
		        title: '添加图书',
		        area : ['800px' , '610px'], 
		        scrollbar: false,//禁止浏览器滚动
		        closeBtn: 2,
		        content: $("#addBook"),
		        btn: ['确认添加', '取消'],
		        yes: function(index,layero){
		        	layero.find('button[lay-filter=subAddBook]').click();//触发form提交按钮
		        },
		        btn2: function(){
		          layer.close(openIndex);
		        }
	        });
		    //提交按钮
		    layui.use(['form', 'jquery'], function(){
			  var form = layui.form;
			  $=layui.jquery;
			  form.on('submit(subAddBook)', function(data){
				  $.ajax({
				    	url:"/adminApi/book",
				    	data:JSON.stringify(data.field),
				    	type:"PUT",
				    	processData:false,
				    	contentType:"application/json",
				    	success:function(rdata){
				    		//同步更新缓存对应的值
				    		$(".layui-laypage-btn").click();
						    layer.msg('添加图书成功')
				    		layer.close(openIndex);
						    $("#addBook :input").val("");
						    $("#a-form-bookimg").attr('src',"");
						    form.render('select');
				    	},
				    	error:function(rdata){
				    		layer.alert('请重试..', {
							      title: '错误提示'
							    });
				    	}
				    });
				    return false;
			  });
			});
		},getCheckData: function(){ //获取选中数据
	      var checkStatus = table.checkStatus('bookReload')
	      ,data = checkStatus.data;
	      layer.alert(JSON.stringify(data));
	    }
	};

	$('.bookDiv .layui-btn').on('click', function() {
		var type = $(this).data('type');
		active[type] ? active[type].call(this) : '';
	});
	
	
	//操作绑定
	table.on('tool(tableFilter)', function(obj){ //注：tool是固定的工具条事件名，tableFilter是table原始容器的属性 lay-filter="对应的值"
		  var data = obj.data; //获得当前行数据
		  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
		  var tr = obj.tr; //获得当前行 tr 的DOM对象
		 
		  if(layEvent === 'del'){//更新状态
			if(data.isShow=='1'){
				updateIsShow('0');
			}else if(data.isShow=='0'){
				updateIsShow('1');
			}
		    function updateIsShow(isShow){
		    	var bmsg,amsg;
		    	if(isShow=='0'){
		    		bmsg = "确定下架？";
		    		amsg = "下架成功";
		    	}else if(isShow=='1'){
		    		bmsg = "确定取消下架？";
		    		amsg = "取消下架成功";
		    	}
		    	layer.confirm(bmsg, function(index){
		    		var book  = new Object();
		    		book.bookid=data.bookid;
		    		book.isShow=isShow;
				      $.ajax({
			            url: "/adminApi/book",
			            data:JSON.stringify(book),
			            processData:false,
				    	contentType:"application/json",
			            type: "PUT",
			            success: function (d) {
			              $(".layui-laypage-btn").click();
			  		      layer.close(index);
			  		      layer.msg(amsg);
			            },
			            error: function (d) {
			                alert("error:"+d);
			            }
		        	  });
				    });
		    }//end  updateIsShow
		  } else if(layEvent === 'edit'){ //编辑
			  $("#form-bookid").val(data.bookid);
			  $("#form-bookname").val(data.bookname);
			  $("#form-booknumber").val(data.booknumber);
			  $("#form-typeid").find("option[value='"+data.typeid+"']").attr("selected", "selected");
			  $("#form-bookauthor").val(data.bookauthor);
			  $("#form-bookpress").val(data.bookpress);
			  $("#form-bookowner").val(data.bookowner);
			  $("#form-bookamount").val(data.bookamount);
			  $("#form-bookborrow").val(data.bookborrow);
			  $("#form-bookremark").val(data.bookremark);
			  if(data.bookpicture!=null){
				  $("#form-bookimg").attr('src',data.bookpicture);
				  $("#form-bookpicture").val(data.bookpicture);
			  }
			  layui.use('form', function(){
					var form = layui.form;	
					form.render('select'); //刷新select选择框渲染
				});
			  var openIndex = layer.open({
				        type: 1,
				        title: '编辑图书信息',
				        area : ['800px' , '610px'], 
				        scrollbar: false,//禁止浏览器滚动
				        closeBtn: 2,
				        content: $("#editBook"),
				        btn: ['确定修改', '取消'],
				        yes: function(index,layero){
				        	layero.find('button[lay-filter=updateBook]').click();//触发form提交按钮
				        },
				        btn2: function(){
				          layer.close(openIndex);
				        }
			        });
			  //提交按钮
			  layui.use(['form', 'jquery'], function(){
				  var form = layui.form;
				  $=layui.jquery;
				  form.on('submit(updateBook)', function(data){
				    $.ajax({
				    	url:"/adminApi/book",
				    	data:JSON.stringify(data.field),
				    	type:"PUT",
				    	processData:false,
				    	contentType:"application/json",
				    	success:function(rdata){
				    		//同步更新缓存对应的值
						    obj.update({
						      bookname:data.field.bookname,
						      booknumber:data.field.booknumber,		  
						      bookauthor:data.field.bookauthor,
						      bookpress:data.field.bookpress,
						      typeid:data.field.typeid,		  
						      bookamount:data.field.bookamount,
						      bookborrow:data.field.bookborrow,
						      bookremark:data.field.bookremark,
						      bookowner:data.field.bookowner
						    });
						    layer.msg('更新图书信息成功')
				    		layer.close(openIndex);
				    	},
				    	error:function(rdata){
				    		layer.alert('请重试..', {
							      title: '错误提示'
							    });
				    	}
				    });
				    return false;
				  });
			});	 
		    
		  }
		});
	
	
	
	  //监听表格复选框选择
	  table.on('checkbox(tableFilter)', function(obj){
	    console.log(obj)
	  });
	  
	  $('.otherOperation .layui-btn').on('click', function(){
		    var type = $(this).data('type');
		    active[type] ? active[type].call(this) : '';
	  });
});


 
</script>






</body>
<script>
<!-- 图片上传 -->
layui.use('upload', function(){
	  var $ = layui.jquery
	  ,upload = layui.upload;
	  
	  
	  //添加图书 图片上传
	  var uploadAdd = upload.render({
	    elem: '#addImg'
	    ,url: '/admin/uploadBookImg'
    	,data: {
    		bookid: function(){
       		    return $('#a-form-bookid').val();
       		},
    		bookpicture: function(){
       		    return $('#a-form-bookpicture').val();
      		}
   		}
	    ,exts: 'png|jpg|bmp|jpeg|gif'
	  	,size: 10240
	    ,before: function(obj){
	      //预读本地文件示例，不支持ie8
	      obj.preview(function(index, file, result){
	        $('#a-form-bookimg').attr('src', result); //图片链接（base64）
	      });
	    }
	    ,done: function(res){
	      //上传成功
	      if(res.rspCode =="000111"){
	    	  $('#a-form-bookpicture').val(res.data.bookpicture);
	    	  $('#a-form-bookid').val(res.data.bookid);
	          return layer.msg('上传图片成功');
	      }else if(res.rspCode =="000000"){
	    	  return layer.msg('替换图片成功');
	      }else{
	    	  return layer.msg('上传图片失败');
	      }
	    }
	    ,error: function(){
		      //重传
		      var addImgText = $('#addImgText');
		      addImgText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini add-reload">重试</a>');
		      addImgText.find('.add-reload').on('click', function(){
		    	  uploadAdd.upload();
		      });
	    }
	  });
	  
	  
	  
	  //图片更新上传
	  var uploadInst = upload.render({
	    elem: '#uploadImg'
	    ,url: '/admin/uploadBookImg'
    	,data: {
   		  bookid: function(){
   		    return $('#form-bookid').val();
   		  },
   		  bookpicture: function(){
   		    return $('#form-bookpicture').val();
   		  }
   		}
	    ,exts: 'png|jpg|bmp|jpeg|gif'
	  	,size: 10240
	    ,before: function(obj){
	      //预读本地文件示例，不支持ie8
	      obj.preview(function(index, file, result){
	        $('#form-bookimg').attr('src', result); //图片链接（base64）
	      });
	    }
	    ,done: function(res){
	      //上传成功
	      if(res.rspCode =="000000"){
	          return layer.msg('更换图片成功');
	      }else{
	    	  return layer.msg('更换图片失败');
	      }
	    }
	    ,error: function(){
	      //重传
	      var imgText = $('#imgText');
	      imgText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
	      imgText.find('.demo-reload').on('click', function(){
	        uploadInst.upload();
	      });
	    }
	  });
});
</script>
<script type="text/html" id="handler">
  <!-- a class="layui-btn layui-btn-xs" lay-event="detail">查看</a -->
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  {{#  if(d.isShow != '0'){ }}
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">下架</a>
  {{#  } }}
  {{#  if(d.isShow == '0'){ }}
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">取消下架</a>
  {{#  } }}
</script>
</html>